<html>
<head>
<title>MD2 models in WebGL Powered By GLGE</title>
<script type="text/javascript" src="glge-compiled.js"></script>
<!--
<script type="text/javascript" src="../../src/core/glge_math.js"></script>
<script type="text/javascript" src="../../src/core/glge.js"></script>
<script type="text/javascript" src="../../src/core/glge_event.js"></script>
<script type="text/javascript" src="../../src/core/glge_quicknote.js"></script>
<script type="text/javascript" src="../../src/core/glge_animatable.js"></script>
<script type="text/javascript" src="../../src/core/glge_document.js"></script>
<script type="text/javascript" src="../../src/core/glge_placeable.js"></script>
<script type="text/javascript" src="../../src/core/glge_jsonloader.js"></script>
<script type="text/javascript" src="../../src/core/glge_group.js"></script>
<script type="text/javascript" src="../../src/core/glge_messages.js"></script>
<script type="text/javascript" src="../../src/animation/glge_action.js"></script>
<script type="text/javascript" src="../../src/animation/glge_actionchannel.js"></script>
<script type="text/javascript" src="../../src/animation/glge_animationcurve.js"></script>
<script type="text/javascript" src="../../src/animation/glge_animationvector.js"></script>
<script type="text/javascript" src="../../src/animation/glge_animationpoints.js"></script>
<script type="text/javascript" src="../../src/geometry/glge_mesh.js"></script>
<script type="text/javascript" src="../../src/geometry/glge_sphere.js"></script>
<script type="text/javascript" src="../../src/material/glge_material.js"></script>
<script type="text/javascript" src="../../src/material/glge_materiallayer.js"></script>
<script type="text/javascript" src="../../src/material/glge_multimaterial.js"></script>
<script type="text/javascript" src="../../src/material/glge_texture.js"></script>
<script type="text/javascript" src="../../src/material/glge_texturecamera.js"></script>
<script type="text/javascript" src="../../src/material/glge_texturecanvas.js"></script>
<script type="text/javascript" src="../../src/material/glge_texturecube.js"></script>
<script type="text/javascript" src="../../src/material/glge_texturevideo.js"></script>
<script type="text/javascript" src="../../src/renderable/glge_lod.js"></script>
<script type="text/javascript" src="../../src/renderable/glge_object.js"></script>
<script type="text/javascript" src="../../src/renderable/glge_text.js"></script>
<script type="text/javascript" src="../../src/renders/glge_renderer.js"></script>
<script type="text/javascript" src="../../src/scene/glge_camera.js"></script>
<script type="text/javascript" src="../../src/scene/glge_light.js"></script>
<script type="text/javascript" src="../../src/scene/glge_scene.js"></script>
<script type="text/javascript" src="../../src/extra/glge_particles.js"></script>
<script type="text/javascript" src="../../src/extra/glge_filter2d.js"></script>
<script type="text/javascript" src="../../src/extra/filters/glge_filter_glow.js"></script>
<script type="text/javascript" src="../../src/extra/filters/glge_filter_ao.js"></script>
<script type="text/javascript" src="../../src/extra/glge_collada.js"></script>
<script type="text/javascript" src="../../src/extra/glge_md2.js"></script>
<script type="text/javascript" src="../../src/extra/glge_input.js"></script>
<script type="text/javascript" src="../../src/extra/glge_wavefront.js"></script>
<script type="text/javascript" src="../../src/physics/glge_physicsext.js"></script>
<script type="text/javascript" src="../../src/physics/glge_physicsabstract.js"></script>
<script type="text/javascript" src="../../src/physics/glge_physicsbox.js"></script>
<script type="text/javascript" src="../../src/physics/glge_physicsmesh.js"></script>
<script type="text/javascript" src="../../src/physics/glge_physicsplane.js"></script>
<script type="text/javascript" src="../../src/physics/glge_physicssphere.js"></script>
<script type="text/javascript" src="../../src/physics/glge_physicsconstraintpoint.js"></script>
-->
<style>
body{
	margin:0px;
}
#header{
height: 100px;
width: 100%;
position:absolute;
top:0px;left: 0px;
}
#animations div{
	cursor:pointer;
	background-color: #666;
	border-radius: 5px;
	color:#fff;
	text-align:center;
	margin: 3px;
	font-family:arial;
	font-size: 12px;
	padding: 2px;
	text-shadow: 0px 1px 0px #000;
}
#animations h2{
	font-family:arial;
	font-size: 20px;
	width: 135px;
	padding: 3px;
	background-color:#333;
	color: #fff;
	border-radius: 5px;
	margin: 5px;
	text-align: center;
	margin-top: 20px;
}
#animations div:hover{
	background-color: #eee;
	color:#000;
}
#title{
	height: 37px;
	background-color: rgba(0,0,0,0.5);
	color:#555;
	text-align:center;
	font-family: arial;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, rgba(128,128,128,0.8)),
	    color-stop(1, rgba(204,204,204,0.8))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgba(128,128,128,0.8) 25%,
	    rgba(204,204,204,0.8) 100%
	);
	text-shadow: 0px 1px 0px #ccc;
	-moz-box-shadow: 0px 5px 5px #333;
	-webkit-box-shadow: 0px 5px 5px #333;
	box-shadow: 0px 5px 5px #333;
}
h1,h2{margin:0;font0family:arial}
h1 small{
	font-size: 16px;
}
h1{padding-top: 5px; font-size: 24px;}
#credit{
	font-family:arial;
	font-size: 11px;
	background-color: rgba(0,0,0,0.7);
	border-radius: 5px;
	height: 150px;
	width: 150px;
	padding: 5px;
	position:absolute;
	bottom: 10px;
	right: 10px;
	color: #ccc;
}
</style>
</head>
<body>



<canvas id="canvas" width="500" height="500">

</canvas>
<div id="header">
<div id="title">
<h1>MD2 models in WebGL <small>Powered By GLGE</small></h1>
</div>
<div id="animations" style="width: 150px">
<h2>Animations</h2>
</div>

</div>

<script id="glge_document" type="text/xml">
	<glge>
	
		<mesh id="xline">
			<positions>
			-1000.0,0,0,
			1000.0,0,0
			</positions>
		</mesh>
		<mesh id="yline">
			<positions>
			0,-1000,0,
			0,1000,0
			</positions>
		</mesh>
		<mesh id="zline">
			<positions>
			0,0,-1000,
			0,0,1000
			</positions>
		</mesh>
		
		<material id="mat1" specular="0">
			<texture id="bear" src="../generated/texture.jpg" />
			<material_layer texture="#bear" mapinput="UV1" mapto="M_COLOR" />
		</material>
		<material id="mat2" specular="0">
			<texture id="Annie" src="../generated/texture.jpg" />
			<material_layer texture="#Annie" mapinput="UV1" mapto="M_COLOR" />
		</material>
		<material id="mat3" specular="0">
			<texture id="akali" src="../generated/texture.jpg"  src2="akali.jpg" />
			<material_layer texture="#akali" mapinput="UV1" mapto="M_COLOR" />
		</material>
		
		<material id="red" specular="0" color="#f00" shadeless="1" />
		<material id="green" specular="0" color="#0f0" shadeless="1" />
		<material id="blue" specular="0" color="#00f" shadeless="1" />
		<material id="lines" specular="0" color="#777" shadeless="1" />		

		<scene id="mainscene" ambient_color="#333" background_color="#888"  camera="#mainCamera">
			<group id="graph">
				<object id="xaxis" draw_type="DRAW_LINES" line_width="2" mesh="#xline" material="#red"  />
				<object id="yaxis" draw_type="DRAW_LINES" line_width="2" mesh="#yline" material="#green"  />
				<object id="zaxis" draw_type="DRAW_LINES" line_width="2" mesh="#zline" material="#blue"  />
			</group>
			<group id="cameraOffset">
				    <camera id="mainCamera" loc_z="20" loc_y="2.2" loc_x="0" rot_x="0" rot_y="0" />
			</group>
		
			<MD2 id="model1" src="../generated/Annie.md2" MD2_animation="static" material="#mat1" scale="0.1"  loc_x="-10" rot_x="0" />
			<MD2 id="model2" src="../generated/Annie_skl.md2" MD2_animation="static" material="#mat2" scale="0.1"  loc_x="0" rot_x="0" />
			<MD2 id="model3" src="../generated/Annie.md2" MD2_animation="static" material="#mat3" scale="0.1"  loc_x="10" rot_x="0" />

			<light id="light" loc_x="-10" loc_y="2.5" loc_z="10" rot_x="0" rot_y="0" attenuation_constant="0.1" type="L_DIR" />
			<light id="light" loc_x="0" loc_y="2.5" loc_z="10" rot_x="0" rot_y="0" attenuation_constant="0.9" type="L_DIR" />
			<light id="light" loc_x="10" loc_y="2.5" loc_z="10" rot_x="0" rot_y="0" attenuation_constant="0.1" type="L_DIR" />
			<light id="light" loc_x="-10" loc_y="2.5" loc_z="-10" rot_x="3.14" rot_y="0" attenuation_constant="0.1" type="L_DIR" />
			<light id="light" loc_x="0" loc_y="2.5" loc_z="-10" rot_x="3.14" rot_y="0" attenuation_constant="0.9" type="L_DIR" />
			<light id="light" loc_x="10" loc_y="2.5" loc_z="-10" rot_x="3.14" rot_y="0" attenuation_constant="0.1" type="L_DIR" />
		</scene>
	</glge>
</script>



<script>

var lookAt=function(origin,point){
	var coord=[origin[0]-point[0],origin[1]-point[1],origin[2]-point[2]];
	var zvec=GLGE.toUnitVec3(coord);
	var xvec=GLGE.toUnitVec3(GLGE.crossVec3([0,1,0],zvec));
	var yvec=GLGE.toUnitVec3(GLGE.crossVec3(zvec,xvec));		
	return [xvec[0], yvec[0], zvec[0], 0,
					xvec[1], yvec[1], zvec[1], 0,
					xvec[2], yvec[2], zvec[2], 0,
					0, 0, 0, 1];
}


var canvas = document.getElementById( 'canvas' );
canvas.width=innerWidth;
canvas.height=innerHeight;


var drag=false;
var view=false;
var rotY=0;
var startpoint;
var cameraPos=[0,0,20];
canvas.onmousedown=function(e){
	if(e.button==0){
        view=true;
        startpoint=[e.clientX,e.clientY,cameraPos[0],cameraPos[1]];
	}
	e.preventDefault();
}
canvas.onmouseup=function(e){
	view=false;
}
canvas.onmousemove=function(e){

	if(view){
		cameraPos[0]=startpoint[2]-(e.clientX-startpoint[0])/canvas.width*20;
		cameraPos[1]=startpoint[3]+(e.clientY-startpoint[1])/canvas.height*20;
		
		camera.setRotMatrix(lookAt([0,cameraPos[1],0],[0,2,-cameraPos[2]]));
		cameraOffset.setRotY(cameraPos[0]/10);
		cameraOffset.setLocY(cameraPos[1]);
		render=true;
	}
}
canvas.onmousewheel=function(e){
    var wheelData = e.detail ? e.detail/10 : e.wheelDelta/-300;
    cameraPos[2]+=wheelData;
    if(cameraPos[2]<1 && cameraPos[2]>-1) cameraPos[2]=cameraPos[2]/Math.abs(cameraPos[2]);
    camera.setLocZ(cameraPos[2]);
    camera.setRotMatrix(lookAt([0,cameraPos[1],0],[0,2,-cameraPos[2]]));
    render=true;
}
canvas.addEventListener('DOMMouseScroll', canvas.onmousewheel, false);


canvas.oncontextmenu=function(e){
	return false;
}

var renderer = new GLGE.Renderer( canvas );

var XMLdoc = new GLGE.Document();
var camera;
var cameraOffset;

	
XMLdoc.onLoad = function(){	
	var scene = XMLdoc.getElement( "mainscene" );
	camera = XMLdoc.getElement( "mainCamera" );
	cameraOffset = XMLdoc.getElement( "cameraOffset" );
	//rotate camera
	camera.setRotMatrix(lookAt([0,cameraPos[1],0],[0,2,-cameraPos[2]]));
	
	models = ["model1", "model2", "model3"];
	
	for(i in models)
	{
		var model_name = models[i];
		var model= XMLdoc.getElement(model_name);
		
		//when model loaded get animations
		model.addEventListener("loaded",function(data){
			
			var anim=document.getElementById("animations");
			
			var animations=this.getAnimations();
			
			for(var i=0;i<animations.length;i++)
			{
				var ele=document.createElement("div");
				ele.innerHTML= animations[i];
				var that=this;
				ele.onmousedown=function()
				{
					that.setMD2Animation(this.innerHTML,true);
				};
				anim.appendChild(ele);
			}
			
			var ele=document.createElement("div");
			ele.innerHTML = "----";
			anim.appendChild(ele);
		});
	}
	

	renderer.setScene( scene );
	renderer.render();
	var lasttime;
	setInterval(function(){
		var now=+new Date;

		renderer.render();

		lasttime=now;
	},15);
}

XMLdoc.parseScript("glge_document");

</script>
</body>
</html>